<template>
  <div class="divWarehouse outDetails">
    <el-collapse
      v-model="activeNames"
      @change="handleChange"
    >
      <el-collapse-item
        title="基础信息"
        name="1"
      >
        <div class="main">
          <div class="baseInfo">
            <el-row :gutter="30">
              <el-col :span="6">
                <p>货主编号</p>
                <p>{{baseData.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>货主名称</p>
                <p>{{baseData.name}}</p>
              </el-col>
              <el-col :span="6">
                <p>联系人</p>
                <p>{{baseData.personName}}</p>
              </el-col>
              <el-col :span="6">
                <p>联系人电话</p>
                <p>{{baseData.phone}}</p>
              </el-col>
            </el-row>
            <el-row
              :gutter="30"
              style="padding-top:20px"
            >
              <el-col :span="6">
                <p>联系人邮箱</p>
                <p>{{baseData.email}}</p>
              </el-col>
              <!-- <el-col :span="6">
                <p>盘点类型</p>
                <p>{{baseData.areaName}}</p>
              </el-col> -->
              <el-col :span="6">
                <p>省/市/区</p>
                <p>{{baseData.location}}</p>
              </el-col>
              <el-col :span="12">
                <p>详细地址</p>
                <p>{{baseData.address}}</p>
              </el-col>
            </el-row>
            <el-row
              :gutter="30"
              style="padding-top:20px"
            >
              <el-col :span="6">
                <p>备注</p>
                <p v-if="baseData.remark===''">暂无</p>
                <p v-else>{{baseData.remark}}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="库位信息"
        name="3"
      >
        <div class="">
          <!-- 表格数据 -->
          <div v-if="listData.length>0">
            <div class="infoTip">总计：{{total}}个库位 {{baseData.goodsTotal}}个 货品</div>
            <el-table
              :data="listData"
              stripe
              border
              style="width: 100%"
              v-loading="loading"
            >
              <el-table-column
                type="index"
                label="序号"
                width="68"
              />
              <el-table-column
                prop="warehouseName"
                label="仓库名称"
              />
              <el-table-column
                prop="areaName"
                label="库区名称"
              />
              <el-table-column
                prop="locationCode"
                label="库位编号"
              />
              <el-table-column
                prop="locationName"
                label="库位名称"
              />
            </el-table>
            <!-- end -->
            <!-- 分页 -->
            <base-pagination
              :total="total"
              :limit="search.size"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            ></base-pagination>
            <!-- end -->
          </div>
          <div
            v-else
            class="emptyTip"
          >
            <span class="imgIcon"></span>
            <p>暂无库位信息</p>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// 公用组件
// 分页
import BasePagination from '@/components/base-pagination/index.vue'
// 基础数据
// api数据接口
import {
  getListDetails,
  getOwnerLocationList
} from '@/module-business/api/owner'

@Component({
  name: 'ListOutDetails',
  components: {
    BasePagination
  }
})
export default class extends Vue {
  private activeNames = ['1']
  private baseData = {}
  private statusData = []
  private listData = []
  private activeStep = 0
  private total = 0
  private loading = false
  private search = {
    id: '', // id
    size: 10, // 每页显示10条
    current: 1 // 当前页
  }

  created() {
    this.getDitails()
    this.getList()
  }

  // 功能
  // 获取列表
  private async getList() {
    const params = {
      ...this.search,
      ownerId: this.$route.params.id
    }
    const { data } = await getOwnerLocationList(params)
    this.listData = data.records
    this.total = parseInt(data.total, 10)
  }

  // 基础信息
  private async getDitails() {
    const id = this.$route.params.id
    if (id !== '') {
      const { data } = await getListDetails(id)
      this.baseData = data
    }
  }

  // ui
  handleChange(val: any) {
    console.log(val)
  }

  // 当前页
  private handleCurrentChange(page: number) {
    this.search.current = page
    this.getList()
  }

  // 每页条数
  private handleSizeChange(page: number) {
    this.search.size = page
    this.search.current = 1
    this.getList()
  }
}
</script>

<style scoped>
</style>
